<template>
  <main>
    <masthead 
      :page="page"
      :type="type"
      :imgUrl="blog.firstPicture" 
      :pageTitle="pageTitle"
      :createTime="blog.createTime"
      :updateTime="blog.updateTime"
      :wordCount="blog.wordCount"
      :views="blog.views"
      :comments="blog.comments"
    ></masthead>
    <detail 
      :blog="blog" 
      :type="type"
      :user="blog.user"
      :blogUrl="getWindowHref"
      :shareStatement="blog.shareStatement"
      :appreciation="blog.appreciation"
      :commentabled="blog.commentabled"
      @clearBlog="clearBlog"
    ></detail>
  </main>
</template>

<script>
import { findBlogDetail } from 'service'

export default {
  name: 'Blog',
  data() {
    return {
      page: 2,
      pageTitle: '',
      blog: {},
      type: {},
    }
  },
  created() {
    this.getBlog()
  },
  computed: {
    getWindowHref() {
      return window.location.href.split('#')[0]
    }
  },
  methods: {
    async getBlog() {
      let id = this.$route.params['id']
      let res = await findBlogDetail(id)
      if (res.data.statusCode === 200) {
        this.blog = res.data.data
        this.type = res.data.data.type
        this.pageTitle = res.data.data.title
      } else {
        this.$router.push({ name: 'error' })
      }
      
    },
    clearBlog() {
      this.blog = {}
    }
  },
  watch: {
    $route(to, from) {
      if(to.name === 'blog') {
        this.getBlog()
      }
    }
  },
  components: {
    "masthead": () => import("components/masthead/Masthead"),
    'detail': () => import("components/common/Detail")
  }
}
</script>

<style lang='scss' scoped>
main {
  max-width: 100%;
  margin: 0 auto;
}
</style>